<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<title>励志小屋</title>
	<!-- 链入标签图标、ui布局、动画效果、字体效果的CSS -->
	<link rel="shortcut icon" href="fonts/tubiao/bitbug_favicon.ico">
	<link rel="bookmark" href="fonts/tubiao/bitbug_favicon.ico">
	<link rel="stylesheet" href="css/UI.css">
	<link rel="stylesheet" href="css/Dh.css">
	<link rel="stylesheet" href="css/Fonts.css">
  </head>
<body>
	<!-- 头部 -->
	<div id="top" class="header">
		<div class="text">
			<p><em>欢迎来到：</em></p>
			<p>励志小屋</p>
		</div>
		<h2>风雨过后，便是彩虹！</h2>
		<a href="#">
			<div class="logo">
				<img src="img/Logo.jpg">
			</div>
		</a>
		<!-- <a href="#">
			<i class="iconfont" style="font-size: 55px; color:#00aeff;">&#xe69f;</i>
		</a> -->
		<div class="user">
			<input type="users" placeholder="用户名" />
			<input type="password" placeholder="密码" />
		</div>
		<p class="btn">
			<input type="button" value="登录">
		</p>
	</div>

	<!-- 导航栏 -->
	<nav>
		<ul>
			<li><a href="#">加油</a></li>
			<li><a href="#">努力</a></li>
			<li><a href="#">刻苦</a></li>
			<li><a href="#">胜利</a></li>
			<li><a> | </a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</nav>

	<!-- 中间内容 -->
	<div class="content">
		<div class="top">
			<!-- 轮播图 -->
			<div class="warp">
				<ul>
					<li><img src="img/b1.jpeg" ></li>
					<li><img src="img/b2.jpeg" ></li>
					<li><img src="img/b3.jpeg" ></li>
					<li><img src="img/b4.jpeg" ></li>
					<li><img src="img/b1.jpeg" ></li>
					<li><img src="img/b2.jpeg" ></li>
				</ul>
			</div>
		</div>
		<div class="middle">
			<!-- 富强、民主、文明、和谐，自由、平等、公正、法治，爱国、敬业、诚信和友善 -->
			<ul>
				<li><a href="#">富强</a></li>
				<li><a href="#">民主</a></li>
				<li><a href="#">文明</a></li>
				<li><a href="#">和谐</a></li>
				<li><a href="#">自由</a></li>
				<li><a href="#">平等</a></li>
				<li><a href="#">公正</a></li>
				<li><a href="#">法制</a></li>
				<li><a href="#">爱国</a></li>
				<li><a href="#">敬业</a></li>
				<li><a href="#">诚信</a></li>
				<li><a hrer="#">友善</a></li>
			</ul>
		</div>
		<div class="bottom">
			<div class="video">
				<video width="700px" height="400px" controls="">
					<source src="img/sp.mp4"></source>
				</video>
			</div>
			<div class="btm_text">
				<a><em>有些人生来是为了赶路的…完成学业事业结婚生子，一切有条不紊按部就班，匆匆忙忙在前三十年生命里就完成了大部分任务，再用剩下的时间去修补与忍耐，并学着苦中作乐。而有些人的人生任务可能只完成了一半，但他们却看了别人几辈子才能看到的风景，你不能说任何一种选择是错。真的，自己开心就好。</em>
				</a>
			</div>
		</div>
	</div>

	<!-- 底部 -->
	<footer>
		<a>制作日期：<em>2020/12/18</em></a>
		<a href="#top">^ 回到顶部 ^</a>
		<a>联系我:</a>
		<!-- 图标 -->
		<a href="#">
			<i class="iconfont" style="font-size: 20px;" href="">&#xe600;
				<div class="qrcode_one">
					<img src="img/QQ_qrcode.png" width="80px" height="80px">
				</div>
			</i>
			<i class="iconfont" style="font-size: 30px;">&#xe61a;
				<div class="qrcode_two">
					<img src="img/WeChat_qrcode.png" width="80px" height="80px">
				</div>
			</i>
			<i class="iconfont" style="font-size: 30px;">&#xe60d;
				<div class="call">
					132xxxx4663
				</div>
			</i>
		</a>
	</footer>
</body>
</html>